<template>
  <div>
    <el-dialog
      :title="title"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="400px"
      @closed="closed"
    >
      <ul>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px]">
          <div class="w-[100px] pl-2">显示标题</div>
          <div class="flex-1 w-0">
            <el-input v-model="form.title"></el-input>
          </div>
        </li>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px] mt-[10px]">
          <div class="w-[100px] pl-2">发送内容</div>
          <div class="flex-1 w-0">
            <el-input v-model="form.content" :rows="3" type="textarea"></el-input>
          </div>
        </li>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px] mt-[10px]">
          <div class="w-[100px] pl-2">排序</div>
          <div class="flex-1 w-0">
            <el-input v-model="form.csort" type="number"></el-input>
          </div>
        </li>
      </ul>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="confirm"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { message } from "@/utils/message";
import { debounce } from "lodash-es";
import { reqReplyAdd, reqReplyEdit } from "@/api/setting";

const props = withDefaults(
  defineProps<{
    data: ReplyMo | null;
    type?: "add" | "edit";
  }>(),
  {
    data: undefined,
    type: "edit"
  }
);
const emit = defineEmits(["update"]);

const title = computed(() => (props.type == "edit" ? "编辑快捷回复" : "添加快捷回复"));
const state = reactive({
  isShow: false,
  updating: false
});
const form = reactive({
  title: "",
  content: "",
  csort: <number | null>null
});
const closed = () => {
  form.title = "";
  form.content = "";
  form.csort = null;
  state.isShow = false;
};
const open = () => {
  state.isShow = true;
  nextTick(() => {
    console.log(props.data);
    if (props.data) {
      form.title = props.data.Title;
      form.content = props.data.Content;
      form.csort = props.data.CSort;
    }
  });
};

const confirm = debounce(
  async () => {
    if (!form.title) {
      message.warning("请输入显示标题");
      return false;
    }
    if (!form.title) {
      message.warning("请输入发送内容");
      return false;
    }
    if (!form.csort) {
      message.warning("请输入排序");
      return false;
    }
    state.updating = true;
    try {
      if (!props.data) {
        await reqReplyAdd({
          Title: form.title,
          Content: form.content,
          CSort: Number(form.csort)
        });
      } else {
        await reqReplyEdit({
          Id: props.data?.Id,
          Title: form.title,
          Content: form.content,
          CSort: Number(form.csort)
        });
      }
      state.updating = false;
      emit("update");
      message.success((props.type == "edit" ? "编辑" : "添加") + "成功");
      setTimeout(() => {
        closed();
      }, 200);
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
